<template>
  <div class="fillTask">
    <!--  -->
    <div class="task_list">
      <div class="task_list_left_top_name">
        <div class="icon_box">
          <i class="iconfont icon-yueyongdianliangbili"></i>
        </div>

        <div class="name">
          排放数据填报11
          <span
            style="color: #333; font-size: 14px"
            v-if="currentTask && currentTask.taskName"
            >(任务名称：{{ currentTask.taskName }} &nbsp;&nbsp; 当前进度：{{
              currentTask.progress
            }})</span
          >
        </div>
      </div>
    
    </div>
    <div class="source">
      <div class="source_box">
        <div
          @click="changSourceIndex(index)"
          :class="[index == sourceIndex ? 'active' : '']"
          v-for="(item, index) in sourceList"
          :key="index"
          class="title"
        >
          {{ item.titlt }}
        </div>
      </div>
    </div>
    <!-- 列表 -->
    <!-- {{dataSource}} -->
    <div class="fillTask_list_box scrollbar" v-if="dataSource">
      <div v-for="(item, index) in dataSource[sourceIndex]" :key="index">
        <div class="header">
          <div class="left">
            <i
              class="iconfont"
              :class="item.iconfont"
              :style="{ color: item.background }"
            ></i>
            <div class="text">{{ item.categoryName }}</div>
          </div>
          <!-- <div class="right">
            <i class="iconfont" :class="item.iconfont"></i>
          </div> -->
        </div>

        <a-row class="fillTask_list_box_content">
          <a-col
            class="fillTask_list_box_content_facility"
            v-for="(k, j) in item.facilityList"
            :key="j"
          >
            <div class="fillTask_list_box_content_facility_box">
              <div class="top">
                <div class="left">
                  <div class="name">{{ k.facilitiesName }}</div>
                  <div class="create">排放源：{{ k.boundaryName }}</div>
                  <div class="date">
                    排放过程：{{ k.industryName }}-{{ k.boundaryCategoryName }}
                  </div>
                  <div class="state">
                    <!-- <div>填报状态：</div> -->
                    <div v-if="k.fillingStatus == 1" class="state_box">
                      <i
                        class="iconfont icon-icon-jinhangzhong"
                        style="font-size: 36px; color: #999"
                      ></i>
                      <div
                        style="font-size: 14px; color: #999; font-weight: 600"
                      >
                        待填报
                      </div>
                    </div>
                    <div v-if="k.fillingStatus == 2" class="state_box">
                      <i
                        class="iconfont icon-duihao4"
                        style="font-size: 36px; color: #87cd67"
                      ></i>
                      <div
                        style="
                          font-size: 14px;
                          color: #87cd67;
                          font-weight: 600;
                        "
                      >
                        已完成
                      </div>
                    </div>

                    <i
                      v-else-if="k.fillingStatus == 3"
                      class="iconfont icon-quxiao"
                      style="font-size: 30px; color: #999"
                    ></i>
                  </div>

                  <div class="date">创建日期：{{ k.createTime }}</div>
                  <div class="date" v-if="k.fillingStatus == 2">
                    碳排放量：{{ k.emission }}
                  </div>
                  <div class="date" v-else>碳排放量：暂无</div>
                </div>
                <div class="right">
                  <div class="state">
                    <i
                      v-if="k.state == 1"
                      class="iconfont icon-duihao3"
                      style="font-size: 30px; color: #87cd67"
                    ></i>
                    <i
                      v-else-if="k.state == 2"
                      class="iconfont icon-daiwancheng"
                      style="font-size: 30px; color: #cc9da2"
                    ></i>
                  </div>
                </div>
              </div>
              <div class="bottom">
                <!-- <a-button v-if="k.fillingStatus == 2" disabled>已填报</a-button> -->
                <a-button
                  v-if="k.fillingStatus == 1"
                  @click="handleEdit({ ...k })"
                  >填报</a-button
                >
                <!-- <a-button v-if="k.fillingStatus == 2" class   @click="handleEdit({ ...k })">修改</a-button> -->
                <a-button
                  v-if="k.fillingStatus == 2"
                  class
                  @click="handleInfo({ ...k })"
                  >查看</a-button
                >
                <!-- <a-button @click="deleteTask()">删除</a-button> -->
              </div>
            </div>
          </a-col>
        </a-row>
      </div>
    </div>
    <FillTaskModal ref="modalForm" @ok="modalFormOk"></FillTaskModal>
   
  </div>
</template>

<script>
import FillTaskModal from "./FillTask/FillTaskModal.vue";

import {
  queryTaskBoundaryListByTaskId,
  queryTasktListBuUserId,
} from "@/api/api.js";
import bus from "@/bus";
import { ListMixin } from "@/mixins/ListMixin";
export default {
  mixins: [ListMixin],
  data() {
    return {
      sourceIndex: "0",
      sourceList: [
        {
          titlt: "范围一 : 直接排放",
          key: "scope1",
          background: "rgba(252, 220, 208, 1),rgba(253, 243, 242, .3)",
        },
        {
          titlt: "范围二 : 间接排放",
          key: "scope2",
          background: "rgba(254, 240, 223, 1),rgba(254, 240, 223, 1)",
        },
        {
          titlt: "范围三 : 价值链排放",
          key: "scope3",
          background: "rgba(232, 233, 251, 1),rgba(232, 233, 251, .3)",
        },
      ],
      taskList: [],
      facilitiesList: null,
      dataSource: null,

      taskId: null,
      currentTask: null,
      
    };
  },
  components: {
    FillTaskModal
  },
  computed: {
    computedFacilitiesCategory() {
      this.facilitiesList.forEach((item) => {
        if (!scopeObj["scope" + item.scopeCode]) {
          scopeObj["scope" + item.scopeCode] = [];
        }
        scopeObj["scope" + item.scopeCode].push(item);
      });
      // 第二层类别
      for (let key in scopeObj) {
        if (Array.isArray(scopeObj[key])) {
          scopeObj[key].forEach((Accounting) => {
            if (!Category["Category" + Accounting.boundaryCategoryCode]) {
              Category["Category" + Accounting.boundaryCategoryCode] = {};
              if (Accounting.boundaryCategoryCode == 1) {
                Category["Category" + Accounting.boundaryCategoryCode][
                  "background"
                ] = "#f74b4a";
                Category["Category" + Accounting.boundaryCategoryCode][
                  "iconfont"
                ] = "icon-jianzhuanquan-";
              }
              Category["Category" + Accounting.boundaryCategoryCode]["title"] =
                Accounting.scopeName;
              Category["Category" + Accounting.boundaryCategoryCode][
                "categoryName"
              ] = Accounting.boundaryCategoryName;
              Category["Category" + Accounting.boundaryCategoryCode][
                "facilityList"
              ] = [];
            }
            Category["Category" + Accounting.boundaryCategoryCode][
              "facilityList"
            ].push(Accounting);
          });
        }
      }
      return Category;
      //   console.log(Category, scopeObj);
    },
  },

  mounted() {
    this.loadData();
  },
  methods: {
    modalFormOk() {
      let param = {
        taskId: this.taskId,
      };
      queryTaskBoundaryListByTaskId(param).then((res) => {
        this.facilitiesList = res.result;
        // 数据分类
        this.TaskBoundaryClassification();
      });
    },
    loadData() {
      if (this.$route.query.taskId) {
        //   console.log("进来了.....................", this.$route.query.taskId);
        this.taskId = this.$route.query.taskId;
        let param = {
          taskId: this.taskId,
        };
        queryTaskBoundaryListByTaskId(param).then((res) => {
          this.facilitiesList = res.result;
          // 数据分类
          this.TaskBoundaryClassification();
        });
      } 
    },
    TaskBoundaryClassification() {
      var dataSource = [];
      var scopeObj = {};
      var Category = {};
      this.facilitiesList.forEach((item) => {
        if (!scopeObj["scope" + item.scopeCode]) {
          scopeObj["scope" + item.scopeCode] = [];
        }
        scopeObj["scope" + item.scopeCode].push(item);
      });
      // 第二层类别

      for (let key in scopeObj) {
        //   console.log(scopeObj[key]);
        if (Array.isArray(scopeObj[key])) {
          scopeObj[key].forEach((Accounting) => {
            if (!Category["Category" + Accounting.boundaryCategoryCode]) {
              Category["Category" + Accounting.boundaryCategoryCode] = {};
              if (Accounting.boundaryCategoryCode == 1) {
                Category["Category" + Accounting.boundaryCategoryCode][
                  "background"
                ] = "#f74b4a";
                Category["Category" + Accounting.boundaryCategoryCode][
                  "iconfont"
                ] = "icon-jianzhuanquan-";
              } else {
                Category["Category" + Accounting.boundaryCategoryCode][
                  "background"
                ] = "#f74b4a";
                Category["Category" + Accounting.boundaryCategoryCode][
                  "iconfont"
                ] = "icon-jianzhuanquan-";
              }
              Category["Category" + Accounting.boundaryCategoryCode][
                "scopeCode"
              ] = Accounting.scopeCode;
              Category["Category" + Accounting.boundaryCategoryCode]["title"] =
                Accounting.scopeName;
              Category["Category" + Accounting.boundaryCategoryCode][
                "categoryName"
              ] = Accounting.boundaryCategoryName;
              Category["Category" + Accounting.boundaryCategoryCode][
                "facilityList"
              ] = [];
            }
            Category["Category" + Accounting.boundaryCategoryCode][
              "facilityList"
            ].push(Accounting);
          });
        }
      }
      for (let key in Category) {
        //   console.log(dataSource);
        if (Category[key].scopeCode == "1") {
          if (!Array.isArray(dataSource[0])) {
            dataSource[0] = [];
          }
          dataSource[0].push(Category[key]);
        }
        if (Category[key].scopeCode == "2") {
          if (!Array.isArray(dataSource[1])) {
            dataSource[1] = [];
          }
          dataSource[1].push(Category[key]);
        }
        if (Category[key].scopeCode == "3") {
          if (!Array.isArray(dataSource[2])) {
            dataSource[2] = [];
          }
          dataSource[2].push(Category[key]);
        }
      }
      //   console.log(dataSource);
      this.dataSource = dataSource;
    },
 
    changSourceIndex(index) {
      this.sourceIndex = index;
    },
    // handleAdd(){

    // },
    deleteTask() {
      alert("您没有权限");
    },
  },
};
</script>

<style lang="scss">
@import "@/assets/css/filltask.scss";
@import "@/assets/css/scrollbar.scss";
</style>